<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <script src="js/checkcode.js"></script>
    <style> 
        .red{
            color:red;
        }
    </style>

</head>
<body class=".container-fluid" bgcolor="#C8E5BC" style="background:url('images/bg.jpg') no-repeat; background-size:100% 100% ">
<div class="row" style="padding-top: 250px; padding-bottom: 250px">
    <div class="col-lg-4 col-md-offset-8">
        <div class="panel-info">
            <div class="panel-info text-center">
                <h3>爱普网课交互平台</h3>
            </div>
        </div>
        <div class="panel-body ">
            <form class="form-horizontal" id="frmLogin">
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class= "glyphicon glyphicon-user"></span>
                            </div>
                            <input type="text" class="form-control" id="u_name"
                                   placeholder="用户名">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock"></span>
                            </div>
                        <input type="password" class="form-control" id="u_pwd"
                               placeholder="密码">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-md-offset-2">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-ok-circle"></span>
                            </div>
                            <input type="text" class="form-control" id="u_check"
                                   placeholder="请输入验证码">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="u_check" class="col-md-3 control-label"></label>
                    <div class="col-md-9">
                        <canvas id="myCanvas" height="35" width="140"></canvas>
                        <label><i class="fa fa-check fa-2x hidden" style="color: limegreen"
                                  id="checkInco"></i></label>
                    </div>
                </div>
            </form>


        </div>
        <div class="form-group">
            <label class="red hidden col-md-offset-2" id="errorLog">登录错误</label>
        </div>
        <div class="panel-info text-center">
            <button  class="btn btn-info btn-primary-outline col-md-3 col-sm-offset-2" id="loginbtn">登录</button>
            <button  class="btn btn-success .btn-primary-outline col-md-3 col-sm-offset-2" id="gotoRegister">注册</button>
        </div>
    </div>
</div>
<script>
    var str;
    $(document).ready(function () {
        str = getCheckCode(document.getElementById("myCanvas"), 130, 35);

        $("#myCanvas").click(function () {
            str = getCheckCode(document.getElementById("myCanvas"), 130, 35);
            $("#checkInco").removeClass("show");
            $("#checkInco").addClass("hidden");
        });

        $("#u_check").bind(' input propertychange ', function () {
            var temp = $("#u_check").val();
            console.log("temp=" + temp + ",l=" + temp.length + ",str=" + str);
            if (temp.length == 4 && temp.toUpperCase() == str) {

                $("#checkInco").removeClass("hidden");
                $("#checkInco").addClass("show");
                $("#loginbtn").click(function () {
                    $.ajax({
                        url:"user/login",
                        type:"post",
                        dataType:"json",
                        data:{
                            u_name:$("#u_name").val(),
                            u_pwd:$("#u_pwd").val()
                        },
                        //result封装成立json对象，解析result.
                        success:function (result) {
                            var errorCode = result.errorCode;
                            // alert(JSON.stringify(result));
                            if(errorCode!=-1){
                                if(errorCode==1){
                                    $(location).attr("href","gotomngIndex");
                                }else if(errorCode==2){
                                    $(location).attr("href","gotoIndex");
                                } else if(errorCode==3){
                                    $(location).attr("href","gotoFirst");
                                }
                            }else{
                                var msg = result.status;
                                $("#u_pwd").val("");
                                // alert(msg);
                                $("#errorLog").text(msg);
                                $("#errorLog").removeClass("hidden");
                            }
                        },
                        error:function (result) {
                        }
                    })
                });
            } else {
                $("#checkInco").removeClass("show");
                $("#checkInco").addClass("hidden");

            }
        })

        $("#gotoRegister").click(function (){
            $(location).attr("href","gotoRegister");
        });
    })
</script>
</body>
</html>